<template>
  <div class="sales-management">
    <!-- 导航栏 -->
    <div class="nav-bar">
      <span
        v-for="item in navItems"
        :key="item.key"
        :class="{ 'active-nav': activeNav === item.key }"
        @click="switchNav(item.key)">
        {{ item.label }}
        <span v-if="item.key === 'online'">({{ onlineCount }})</span>
        <span v-if="item.key === 'offline'">({{ offlineCount }})</span>
      </span>
    </div>

    <!-- 搜索区域 -->
    <div class="search-area">
      <el-input
        class="search-input"
        v-model="searchKey"
        placeholder="搜索销售"
        @keyup.enter="handleSearch">
        <template #prefix>
          <el-icon
            @click="handleSearch"
            :size="14">
            <Search />
          </el-icon>
        </template>
      </el-input>
      <el-icon
        class="icon_refresh"
        style="margin-left: 10px"
        :size="20"
        @click="refreshList">
        <Refresh />
      </el-icon>
    </div>

    <!-- 销售列表 -->
    <div class="sales-list">

      <el-scrollbar height="100%" always @scroll="scroll">
        <div ref="innerRef">
          <div class="user flex items-center" v-for="item,index in salesList" :key="index">
            <el-avatar :src="item.avatar"></el-avatar>
            <div class="flex-1 ml-[10px]">
              <div class="flex items-center">
                <div class="mr-[5px] nickname">{{ item.nickname || "--" }}</div>
                <div
                  v-if="item.external_userid"
                  class="mr-[5px] text-[green] text-[12px]">
                  @微信
                </div>
              </div>
              <div class="user-store"> <span>归属门店：</span>{{ item.store_name }}</div>
            </div>
            <div>{{ format(item.time_length) }}</div>
          </div>
        </div>
      </el-scrollbar>
    </div>

    <!-- 编辑模态框 -->
    <el-dialog
      v-model="editDialogVisible"
      title="编辑销售信息">
      <el-form :model="currentSales">
        <el-form-item label="销售姓名">
          <el-input v-model="currentSales.name" />
        </el-form-item>
        <el-form-item label="跟进人">
          <el-input v-model="currentSales.follower" />
        </el-form-item>
        <el-form-item label="标签">
          <el-select
            v-model="currentSales.tags"
            multiple>
            <el-option
              v-for="tag in allTags"
              :key="tag"
              :label="tag"
              :value="tag" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="saveEdit">
          保存
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="FSaleList">
// FSaleList 组件用于显示直播销售列表
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, Refresh } from '@element-plus/icons-vue'
import { getActivityAnalysisDataApi } from '@/addon/htscrm/api'
import { useRoute } from 'vue-router'

// 根据 tag 返回对应的样式类型

// WebSocket 相关（这里只是示例，实际使用时替换 URL 及数据处理）
const onlineCount = ref(0)
const offlineCount = ref(0)

// 数据相关
const salesList = ref<any[]>([])
const searchKey = ref('')

const editDialogVisible = ref(false)
const currentSales = ref<Sales>({
    id: '',
    name: '',
    avatar: '',
    follower: '',
    tags: [],
    status: 'online',
    area: '',
    behavior: ''
})

// 导航相关
const navItems = [
    { key: 'online', label: '在线' },
    { key: 'offline', label: '离线' },
    { key: 'comment', label: '评论' },
    { key: 'mute', label: '禁言' }
]
const activeNav = ref('online')

// 行为选项

// 用于编辑时选择标签的备选项
const allTags = ['高意向客户', '复购率高', '重点关注', 'VIP客户']

// 计算属性：根据当前状态、筛选条件和搜索关键字过滤销售数据

// 全选/取消全选的计算属性

// 初始化 WebSocket
const route = useRoute()

const format = (val:number) => {
    const m = parseInt(val / 60 + '')
    const s = val % 60
    return `${m}分${s}秒`
}
// 刷新列表数据 模拟
const refreshList = async () => {
    try {
        const res = await getActivityAnalysisDataApi({
            id: route.params.id,
            search_key: searchKey.value || undefined
        })

        salesList.value = salesList.value.concat(res.data.data || [])
        ElMessage.success('刷新成功')
    } catch (error) {
        ElMessage.error('刷新失败')
    }
}

const handleSearch = () => {
    // 接调用刷新方法
    refreshList()
}

const switchNav = (navKey: string) => {
    activeNav.value = navKey
}

const saveEdit = () => {
    const idx = salesList.value.findIndex((s) => s.id === currentSales.value.id)
    if (idx !== -1) {
        salesList.value.splice(idx, 1, { ...currentSales.value })
        ElMessage.success('编辑成功')
    }
    editDialogVisible.value = false
}

const scroll = () => {

}

// 生命周期
onMounted(() => {
    // initWebSocket()
    refreshList()
})
</script>

<style lang="scss" scoped>
.sales-management {
  width: 100%;
  padding: 10px;
  background-color: #fff;
  height: 100vh;
  border-left: 1px solid #ccc;
  position: relative;
}

.user {
  margin: 0 10px;
  padding: 10px 0;
  border-bottom: 1px solid #efefef;

  .user-store {
    color:#999;
    font-size: 12px;
  }
}

/* 导航栏 */
.nav-bar {
  display: flex;
  justify-content: space-evenly;
  gap: 20px;
  padding: 5px 0;
  padding-bottom: 0;
  border-bottom: 1px solid #eee;
}
.nav-bar span {
  cursor: pointer;
  padding: 5px 0px;
  font-size: 14px;
  color: #555;
}
.active-nav {
  font-size: 10px;
  color: #3b76f6;
  border-bottom: 2px solid #3b76f6;
}

/* 搜索区域 */
.search-area {
  margin: 20px 0;
  display: flex;
  align-items: center;
  .search-input {
    border-radius: 20px;
  }
}

/* 筛选区域 */
.filter-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.filter-left {
  display: flex;
  width: 80%;
}
.icon_refresh {
  cursor: pointer;
}
.transparent-select :deep(.el-input__wrapper) {
  box-shadow: none !important;
  background: transparent !important;
}

.transparent-select :deep(.el-select__wrapper) {
  box-shadow: none !important;
  background: transparent !important;
}

.transparent-select :deep(.el-select__selected-item) {
  font-size: 12px;
}

/* 销售列表 */
.sales-list {
  background-color: #fff;
  // border: 1px solid #eee;
}
.sales-item {
  display: flex;
  align-items: flex-start;
  padding: 10px 5px;
  border-bottom: 1px solid #eee;
}
.item-left {
  height: 7vh;
  margin-right: 20px;
  display: flex;
  align-items: center;
}
.item-middle-left {
  margin-right: 10px;
}
.item-middle-right {
  flex: 1;
}
.item-right {
  margin-left: auto;
  position: relative;
}
.sales-name {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 5px;
}
.follower {
  color: #888;
  font-size: 12px;
  margin-bottom: 5px;
}
.tags {
  display: flex;
  gap: 5px;
  width: 13vw;
  flex-wrap: wrap;
}

/* 批量操作区域 */
.batch-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  position: fixed;
  bottom: 20px;
  right: 0;
  width: 20.7vw;
  border-top: 1px solid #ccc;
}
.action-left {
  display: flex;
  align-items: center;
  gap: 5px;
}
</style>
